<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cyberpunk Style</title>
    <link rel="stylesheet" href="styles.css">
</head>
<style>
    body {
    background-color: #000;
    color: #fff;
    font-family: 'Courier New', Courier, monospace;
    margin: 0;
    padding: 0;
}

header {
    background-color: #222;
    padding: 20px;
    text-align: center;
}

h1.neon {
    color: #00ffff;
    text-shadow: 0 0 5px #00ffff, 0 0 10px #00ffff, 0 0 15px #00ffff, 0 0 20px #00ffff, 0 0 30px #00ffff, 0 0 40px #00ffff;
    animation: neon-blink 1s ease-in-out infinite;
}

@keyframes neon-blink {
    0% { opacity: 1; }
    50% { opacity: 0.5; }
    100% { opacity: 1; }
}

nav ul {
    list-style-type: none;
    padding: 0;
}

nav ul li {
    display: inline;
    margin-right: 20px;
}

nav ul li a {
    color: #fff;
    text-decoration: none;
}

nav ul li a:hover {
    color: #00ffff;
}

.content {
    padding: 50px;
    text-align: center;
}

footer {
    background-color: #222;
    color: #fff;
    padding: 20px;
    text-align: center;
}


.button-container {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 20px;
}

.cyber-button {
    border: none;
    border-radius: 5px;
    color: #00ffff;
    padding: 10px 20px;
    text-transform: uppercase;
    font-size: 16px;
    cursor: pointer;
    background: transparent;
    outline: none;
    box-shadow: inset 0 0 0 2px #00ffff;
    transition: all 0.3s ease;
}

.cyber-button:hover {
    color: #fff;
    box-shadow: inset 0 0 0 2px #fff, 0 0 10px #00ffff, 0 0 20px #00ffff, 0 0 30px #00ffff, 0 0 40px #00ffff;
    animation: pulse 1s infinite;
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}
</style>

<body>
    <header>
        <h1 class="neon">CyberCity</h1>
        <nav>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Explore</a></li>
                <li><a href="#">News</a></li>
                <li><a href="#">About</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <section class="content">
            <h2>Welcome to the Neon Jungle</h2>
            <p>This is your gateway to the future. Explore the city, meet its inhabitants, and uncover its secrets.</p>
            <div class="button-container">
                <button class="cyber-button" onclick="alert('Accessing Data...')">Access Data</button>
                <button class="cyber-button" onclick="alert('System Check...')">System Check</button>
                <button class="cyber-button" onclick="alert('Emergency Protocol...')">Emergency Protocol</button>
            </div>
        </section>
    </main>
    <footer>
        <p>&copy;2023 CyberCity. All rights reserved.</p>
    </footer>
</body>
</html>